fix(configurator): respect global studio token visibility - #408

• X
• Mastodon
• Reddit
• LinkedIn

• Persist a global ui.showTokens preference in localStorage-backed UI state.
• Add a header toggle to show/hide raw --sf-* token names across Studios.
• Update Studio controls to follow global visibility while keeping FriendlyControl local reveal.

graph TD
  H["Header toggle"] --> U["ui store"] --> D["derived showToken"] --> S["Studios"] --> F["FriendlyControl"]
  A["App snapshot"] --> L[("localStorage")] --> X["sanitiseUiState"] --> U
  subgraph Legend
    direction LR
    _db[("Persisted state")] ~~~ _ui["UI state"]
  end

Loading

The following are alternative approaches to this PR:

1. Prop-drill from App (no store imports in components)

• ➕ Makes dependencies explicit and avoids importing global store into leaf components
• ➕ Potentially simpler to test components in isolation
• ➖ Requires threading props through multiple component layers
• ➖ More boilerplate and refactors when new global UI prefs are added

2. Svelte context for UI preferences

• ➕ Avoids direct store imports while still preventing prop-drilling
• ➕ Keeps UI preference wiring localized to a provider boundary
• ➖ Adds an additional indirection/concept for contributors
• ➖ Still requires careful SSR/test setup for context providers

Recommendation: Current approach (persisted shared store + derived showToken) is appropriate given existing architecture already relies on a shared ui store. The local FriendlyControl override behavior is preserved cleanly, and the added component tests reduce regression risk. Consider context/prop-drilling only if there’s a broader initiative to reduce direct store imports in leaf components.

Enhancement (3) +5 / -2

App.sveltePersist 'showTokens' in UI snapshot +1/-1

Persist 'showTokens' in UI snapshot

• Extends the localStorage UI snapshot to include 'showTokens' so the preference survives reloads. Keeps persistence aligned with sanitisation and store initialization.

configurator/src/App.svelte

Header.svelteAdd header toggle for token name visibility +1/-0

Add header toggle for token name visibility

• Adds a toggle button that flips 'ui.showTokens' and reflects state via aria-pressed and dynamic labels. Provides a single global control for showing/hiding raw token names.

configurator/src/components/Header.svelte

store.svelte.jsAdd persisted 'ui.showTokens' field +3/-1

Add persisted 'ui.showTokens' field

• Introduces 'showTokens' on the shared 'ui' state with a default sourced from saved UI state. Updates documentation/types for the persisted UI state shape.

configurator/src/lib/store.svelte.js

Bug fix (3) +11 / -4

ColorStudio.svelteWire ColorStudio controls to global 'ui.showTokens' +3/-1

Wire ColorStudio controls to global 'ui.showTokens'

• Imports the shared 'ui' store and derives 'showToken' from 'ui.showTokens'. Passes '{showToken}' to FriendlyControl instead of forcing token visibility on.

configurator/src/components/editors/ColorStudio.svelte

StudioControls.svelteRespect global token visibility in StudioControls +3/-2

Respect global token visibility in StudioControls

• Derives 'showToken' from 'ui.showTokens' and passes it into FriendlyControl. Prevents Studio-only wiring from overriding the new global preference.

configurator/src/components/editors/StudioControls.svelte

uiState.jsSanitise and accept 'showTokens' from persisted UI state +5/-1

Sanitise and accept 'showTokens' from persisted UI state

• Extends 'sanitiseUiState' to whitelist 'showTokens' when it’s a boolean. Keeps UI state loading robust to unknown/invalid persisted values.

configurator/src/lib/uiState.js

Tests (1) +31 / -2

studios.test.jsAdd component tests for global token visibility + local reveal +31/-2

Add component tests for global token visibility + local reveal

• Ensures tests reset 'ui.showTokens' and adds assertions that Studio token names follow the global setting. Verifies FriendlyControl can still reveal raw token names locally via its own toggle.

configurator/tests-components/studios.test.js

Description

The new global ui.showTokens toggle is presented as a global preference, but some FriendlyControl
call sites still hardcode or omit showToken, so token-name visibility will remain inconsistent
(e.g., Essentials always shows token names; SmartSettings never shows them even when enabled). This
makes the header toggle not reliably reflect the stated “show/hide token names” behavior.

Code

configurator/src/components/Header.svelte[56]

+      <button onclick={() => (ui.showTokens = !ui.showTokens)} aria-pressed={ui.showTokens} title={ui.showTokens ? 'Hide token names' : 'Show token names'} aria-label={ui.showTokens ? 'Hide token names' : 'Show token names'}>{ui.showTokens ? '--' : '{ }'}</button>

Relevance

⭐⭐⭐ High

Team accepts UI consistency fixes; similar cross-view correctness changes were accepted (e.g.,
DomainPanel/TokenRow consistency in PRs #369,#395).

PR-#369
PR-#395
PR-#402

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The header introduces a global toggle and the store documents the preference as applying to
friendly/studio controls, but FriendlyControl only displays token names when its showToken prop is
truthy (or rawOpen). DomainPanel still forces showToken on for Essentials, and SmartSettings never
forwards ui.showTokens, so those areas cannot follow the global preference.

configurator/src/components/Header.svelte[48-57]
configurator/src/lib/store.svelte.js[76-79]
configurator/src/components/FriendlyControl.svelte[7-33]
configurator/src/components/DomainPanel.svelte[227-245]
configurator/src/components/SmartSettings.svelte[146-162]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
A global UI preference (`ui.showTokens`) is introduced and toggled from the header, but not all `FriendlyControl` usages respect it. Some places force `showToken` on, and others never forward the global setting, so the toggle doesn’t consistently show/hide raw token names.

## Issue Context
- `ui.showTokens` is described as applying to “friendly/studio controls”.
- `FriendlyControl` only shows the token name when `showToken || rawOpen`.
- Some callers still use `showToken` shorthand (always true) or omit the prop, which bypasses the global preference.

## Fix Focus Areas
- Ensure `FriendlyControl` call sites that should follow the global preference pass `showToken={ui.showTokens}` (or a local `$derived(ui.showTokens)`), and remove any unconditional `showToken` shorthand where it should not override the global preference.
- Consider adding a fallback inside `FriendlyControl` (e.g., defaulting to `ui.showTokens` when `showToken` prop isn’t explicitly provided) to avoid missing future call sites, while keeping `rawOpen` behavior intact.

### Files/lines to update
- configurator/src/components/DomainPanel.svelte[227-245]
- configurator/src/components/SmartSettings.svelte[146-162]
- configurator/src/components/FriendlyControl.svelte[7-33]
- configurator/src/lib/store.svelte.js[76-79]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Description

sanitiseUiState now accepts and returns the persisted showTokens boolean, but the existing ui-state
unit tests were not extended to cover this new field. This reduces regression protection for the new
persistence behavior.

Code

configurator/src/lib/uiState.js[R52-54]

+  if (typeof parsed.showTokens === 'boolean') {
+    out.showTokens = parsed.showTokens;
+  }

Relevance

⭐⭐⭐ High

They typically update ui-state tests when persistence schema changes (ui-state.test.js updates
merged in PR #367; testing emphasized in #313).

PR-#367
PR-#313

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

uiState.js now explicitly accepts boolean showTokens, but the ui-state test suite only covers
domain/outputMode/mode and malformed payloads; it contains no assertions for showTokens.

configurator/src/lib/uiState.js[14-56]
configurator/tests/ui-state.test.js[9-45]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`sanitiseUiState()` now supports a new persisted field (`showTokens`), but `configurator/tests/ui-state.test.js` doesn’t assert the new behavior.

## Issue Context
The validator is the single entry point for persisted UI state; adding a field without tests makes future refactors more likely to silently break persistence.

## Fix Focus Areas
- Add a test that a valid boolean `showTokens` round-trips.
- Add a test that non-boolean values (e.g. string/number/null) are ignored.

### Files/lines to update
- configurator/tests/ui-state.test.js[9-45]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools